<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts examples</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="JS/amcharts.js" type="text/javascript"></script>
<script src="JS/serial.js" type="text/javascript"></script>
<script src="JS/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	var chart;

	var chartData = [ {
		"year" : 2005,
		"income" : 23.5,
		"expenses" : 18.1
	}, {
		"year" : 2006,
		"income" : 26.2,
		"expenses" : 22.8
	}, {
		"year" : 2007,
		"income" : 30.1,
		"expenses" : 23.9
	}, {
		"year" : 2008,
		"income" : 29.5,
		"expenses" : 25.1
	}, {
		"year" : 2009,
		"income" : 24.6,
		"expenses" : 25
	} ];

	AmCharts
			.ready(function() {
				// SERIAL CHART
				chart = new AmCharts.AmSerialChart();
				chart.dataProvider = chartData;
				chart.categoryField = "year";
				chart.startDuration = 1;
				chart.rotate = true;

				// AXES
				// category
				var categoryAxis = chart.categoryAxis;
				categoryAxis.gridPosition = "start";
				categoryAxis.axisColor = "#DADADA";
				categoryAxis.dashLength = 3;

				// value
				var valueAxis = new AmCharts.ValueAxis();
				valueAxis.dashLength = 3;
				valueAxis.axisAlpha = 0.2;
				valueAxis.position = "top";
				valueAxis.title = "Million USD";
				valueAxis.minorGridEnabled = true;
				valueAxis.minorGridAlpha = 0.08;
				valueAxis.gridAlpha = 0.15;
				chart.addValueAxis(valueAxis);

				// GRAPHS
				// column graph
				var graph1 = new AmCharts.AmGraph();
				graph1.type = "column";
				graph1.title = "Income";
				graph1.valueField = "income";
				graph1.lineAlpha = 0;
				graph1.fillColors = "#ADD981";
				graph1.fillAlphas = 0.8;
				graph1.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>";
				chart.addGraph(graph1);

				// line graph
				var graph2 = new AmCharts.AmGraph();
				graph2.type = "line";
				graph2.lineColor = "#27c5ff";
				graph2.bulletColor = "#FFFFFF";
				graph2.bulletBorderColor = "#27c5ff";
				graph2.bulletBorderThickness = 2;
				graph2.bulletBorderAlpha = 1;
				graph2.title = "Expenses";
				graph2.valueField = "expenses";
				graph2.lineThickness = 2;
				graph2.bullet = "round";
				graph2.fillAlphas = 0;
				graph2.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>";
				chart.addGraph(graph2);

				// LEGEND
				var legend = new AmCharts.AmLegend();
				legend.useGraphSettings = true;
				chart.addLegend(legend);

				chart.creditsPosition = "top-right";

				// WRITE
				chart.write("chartdiv");
			});
</script>
</head>

<body>
	<div id="chartdiv" style="width: 500px; height: 600px;"></div>
	<form action="/ExportSVG2Excel" method="post">
		<input type="hidden" name="svgCode" />
	</form>
	<button onclick="downloadChart()">download</button>
</body>
<script>
	//下载的函数(设置值，提交表单)
	function downloadChart() {
		var svgCode = $("#chartdiv").find("svg:first").prop("outerHTML");//会返回包括自己在内的内容
		alert(svgCode);
		$("[name='svgCode']").val(svgCode);
		$("form").submit();
	}
</script>
</html>